<template>
	<div class="root">
		<!--顶部导航-->
		<top-nav class="main_top"></top-nav>
		
		<div class="main_bottom">
			<!--左侧导航-->
			<side-nav class="main_left"></side-nav>
			<!--右侧工作空间-->
			<Content class="main_workspace"></Content>
		</div>
		
	</div>
</template>

<script>
	//@代表src目录
	const TopNav=()=>import("@/views/layout/TopNav.vue")
	const SideNav=()=>import("@/views/layout/SideNav.vue")
	const Content=()=>import("@/views/layout/Content.vue")
	export default{
		components:{
			TopNav,
			SideNav,
			Content
		}
	}
</script>

<style scoped="scoped">
	.root{
		height: 100%;
	}
	.main_top{
		width: 100%;
		height: 60px;
		background-color: pink;
	}
	.main_bottom{
		width: 100%;
		height: 90%;
		display: flex;
		flex-direction: row;
	}
	.main_left{
		width: 200px;
		height: 100%;
		background-color: aqua;
	}
	.main_workspace{
		width: 100%;
		height: 100%;
		background-color: silver;
	}
</style>